<template>
	<view>
		<view class="bgimg">
			<!-- 登录注册按钮 -->
			<view style="margin-top: 298rpx;" class="dflex">
				<view class="dflex jcc alc flexc pro" @click="type = true">
					<view :class="type ? 'active' : 'unactive'" class="login">登录</view>
					<image
						v-show="type"
						style="width: 52rpx;height: 10rpx;"
						src="../../pagesA/images/lines.png"
						class="mt14"
					></image>
				</view>
				<view class="dflex jcc alc flexc" @click="type = false">
					<view :class="!type ? 'active' : 'unactive'" class="reg">注册</view>
					<image
						v-show="!type"
						style="width: 52rpx;height: 10rpx;"
						src="../../pagesA/images/lines.png"
						class="mt14"
					></image>
				</view>
			</view>
		</view>
		<!-- 登录输入框 -->
		<view v-if="type">
			<!-- 手机号 -->
			<view style="width: 670rpx;" class="auto">
				<u--input
					v-model="phone"
					placeholder="请输入手机号"
					border="bottom"
					fontSize="32rpx"
					:customStyle="{
						borderBottom: '1px solid #ff0',
						zIndex: 99
					}"
				></u--input>
			</view>
			<!-- 密码 -->
			<view style="width: 670rpx;" class="auto mt60 dflex alc">
				<u--input
					v-model="password"
					placeholder="请输入密码"
					border="bottom"
					:type="eyesType"
					fontSize="32rpx"
					:customStyle="{
						borderBottom: '1px solid #ff0',
						zIndex: 99
					}"
				></u--input>
				<image
					@click="changeType"
					src="../images/eyes.png"
					class="posia eyes"
					v-if="eyesType == 'password'"
				></image>
				<image
					@click="changeType"
					src="../images/eyes2.png"
					class="posia eyes"
					v-if="eyesType == 'text'"
				></image>
			</view>
			<!-- 忘记密码 -->
			<view class="dflex alc psd" @click="handerSetpwd">
				<image
					src="../images/wjmm.png"
					style="width: 28rpx;height: 28rpx;margin-top: 6rpx;"
				></image>
				<text class="fs28 ml8" style="color: #4151DB;">忘记密码</text>
			</view>
			<!-- 登录按钮 -->
			<view class="loginbtn textc fw900 auto" @click="hangderLogin">
				{{ type ? '登录' : '注册' }}
			</view>
		</view>

		<!-- 注册输入框 -->
		<view v-if="!type">
			<!-- 手机号 -->
			<view style="width: 670rpx;" class="auto">
				<u--input
					v-model="phone"
					placeholder="请输入手机号"
					border="bottom"
					fontSize="32rpx"
					:customStyle="{
						borderBottom: '1px solid #ff0',
						zIndex: 99
					}"
				></u--input>
			</view>
			<!-- 请输入验证码 -->
			<view style="width: 670rpx;margin-top: 60rpx;" class="auto dflex alc">
				<u--input
					v-model="phone"
					placeholder="请输入验证码"
					border="bottom"
					fontSize="32rpx"
					:customStyle="{
						borderBottom: '1px solid #ff0',
						zIndex: 99
					}"
				></u--input>
				<view style="color: #4151DB;right: 50rpx" class="posia z-999" @click="getCode">
					{{ codemsg }}
				</view>
			</view>
			<!-- 密码 -->
			<view style="width: 670rpx;" class="auto mt60 dflex alc">
				<u--input
					v-model="password"
					placeholder="请输入密码"
					border="bottom"
					:type="eyesType"
					fontSize="32rpx"
					:customStyle="{
						borderBottom: '1px solid #ff0',
						zIndex: 99
					}"
				></u--input>
				<image
					@click="changeType"
					src="../images/eyes.png"
					class="posia eyes"
					v-if="eyesType == 'password'"
				></image>
				<image
					@click="changeType"
					src="../images/eyes2.png"
					class="posia eyes"
					v-if="eyesType == 'text'"
				></image>
			</view>
			<!-- 密码 -->
			<view style="width: 670rpx;" class="auto mt60 dflex alc">
				<PickRegions
					style="width:500rpx;"
					:defaultRegion="defaultRegionCode"
					@getRegion="handleGetRegion"
				>
					<u--input
						placeholder="请选择代理区域"
						disabled
						border="bottom"
						fontSize="32rpx"
						v-model="address"
						:customStyle="{
							borderBottom: '1px solid #ff0',
							zIndex: 99
						}"
					></u--input>
				</PickRegions>

				<view style="right: 50rpx" class="posia z-999">
					<u-icon name="arrow-right" color="#999999" size="20"></u-icon>
				</view>
			</view>
			<!-- 登录按钮 -->
			<view class="loginbtn textc fw900 auto" @click="hangderLogin">
				{{ type ? '登录' : '注册' }}
			</view>
		</view>

		<!-- 用户隐私协议 -->
		<view class="success dflex alc jcc fs28">
			<view @click="success = !success">
				<view v-if="!success"></view>
				<image v-if="success" src="../images/success.png" mode=""></image>
			</view>
			<view style="color: #999" class="ml10" @click="success = !success">同意</view>
			<view style="color: #4151DB">《用户协议》</view>
			<view style="color: #999">和</view>
			<view style="color: #4151DB">《隐私政策》</view>
		</view>
	</view>
</template>

<script>
import PickRegions from '../components/pick-regions/pick-regions.vue';
export default {
	components: {
		PickRegions
	},
	data() {
		return {
			type: true,
			phone: '',
			password: '',
			eyesType: 'password',
			success: false,
			codemsg: '获取验证码', //获取验证码显示的文字
			time: 0, //验证码倒计时中 不能进行点击
			num: 60, //倒计时秒数
			defaultRegionCode: '410105', //默认的区域
			address: '', //选择的区域
			region: []
		};
	},
	methods: {
		// 切换密码显示
		changeType() {
			console.log(123);
			if (this.eyesType == 'password') {
				this.eyesType = 'text';
			} else if (this.eyesType == 'text') {
				this.eyesType = 'password';
			}
		},
		// 忘记密码
		handerSetpwd() {
			uni.navigateTo({
				url: '/pagesB/setpwd/setpwd'
			});
		},
		// 登录功能
		hangderLogin() {
			if (this.type) {
				console.log('登录成功');
				uni.setStorageSync('indexType', 3);
				uni.reLaunch({
					url: '/pagesB/index/index'
				});
			} else {
				console.log('注册成功');
			}
		},
		// 获取选择的地区
		handleGetRegion(region) {
			this.region = region;
			this.address = `${region[0].name}-${region[1].name}-${region[2].name}`;
		},
		getCode() {
			this.time = this.time + 1;
			if ((this.num === 60 || this.num === 0) && this.time === 1) {
				console.log('获取验证码');
				let timer = setInterval(() => {
					this.codemsg = this.num-- + '秒后重新获取';
					if (this.num === 0) {
						this.codemsg = '再次获取';
						this.num = 60;
						this.time = 0;
						clearInterval(timer);
						return false;
					}
				}, 1000);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.bgimg {
	background-image: url('../images/loginbg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 750rpx;
	height: 478rpx;
	overflow: hidden;
}
.active {
	font-size: 52rpx;
	color: #333;
}
.unactive {
	font-size: 44rpx;
	color: #999;
	margin-top: -18rpx;
}
.pro {
	margin-left: 50rpx;
	margin-right: 60rpx;
}
.eyes {
	width: 40rpx;
	height: 40rpx;
	right: 50rpx;
	z-index: 999;
}
.psd {
	margin-left: 550rpx;
	margin-top: 20rpx;
}
.loginbtn {
	width: 670rpx;
	height: 100rpx;
	line-height: 100rpx;
	color: #fff;
	border-radius: 50rpx;
	background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
	margin-top: 140rpx;
	margin-bottom: 200rpx;
}
.success {
	padding-bottom: 60rpx;
	image {
		width: 30rpx;
		height: 30rpx;
	}
	& > view:nth-child(1) {
		& > view {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			border: 2rpx solid #ccc;
		}
	}
}
</style>
